<template>
<div>
  <content-header title="Notification"></content-header>
  <el-card class="box-card">
    <div slot="header"
         class="clearfix">
      <el-button size="small" @click="deleteNotice(multipleSelection.map(item => item.id))">{{ $t('delete') }}</el-button>
      <el-button size="small" type="primary" style="float: right" @click="visible = true">Create New</el-button>
    </div>
    <ejs-grid ref='grid'
              v-loading="loading"
              gridLines='Both'
              :dataSource="tableData"
              :toolbar="toolbar"
              :allowPaging="true"
              :allowSorting='true'
              :allowExcelExport='true'
              :allowPdfExport='true'
              :allowFiltering="true"
              :allowSelection="true"
              :allowResizing='true'
              :showColumnChooser='true'
              :pageSettings="pageOptions"
              :filterSettings="filterOptions"
              :selectionSettings='selectionOptions'
              :frozenColumns='3'
              :rowSelecting="selectingEvent"
              :rowDeselected="selectingEvent"
              :toolbarClick='toolbarClick'>
      <e-columns>
        <e-column type='checkbox'
                  width='50'></e-column>
        <e-column field='name'
                  headerText='Notification Name'
                  :isPrimaryKey='true'></e-column>
        <e-column field='Action'
                  headerText='Action'
                  width="120"
                  :template='cTemplate'></e-column>
        <e-column field='tenants'
                  headerText='Tenants'></e-column>
        <e-column field='type'
                  headerText='Type'></e-column>
        <e-column
            :template="sendTemplate"
            headerText='When to send notifications'></e-column>
        <e-column
                  field='status'
                  :template="statusTemplate"
                  headerText='Status'></e-column>
        <e-column
            field='hide'
            headerText='Hide'></e-column>
        <e-column field='colour'
                  headerText='Colour'></e-column>
        <e-column :template="createdTemplate"
                  field="createDate"
                  headerText='Created Date'></e-column>
        <e-column field='startTime'
                  headerText='Start Time'></e-column>
        <e-column field='endTime'
                  headerText='End Time'></e-column>
        <e-column :template="updateTemplate"
                  field='updateDate'
                  headerText='Update Date'></e-column>
      </e-columns>
    </ejs-grid>
  </el-card>
  <create-notice :visible.sync="visible" :editNoticeData="editNoticeData" @success="success" @close="close"></create-notice>
</div>
</template>

<script>
import contentHeader from "@/components/content-header/content-header.vue";
import createNotice from "@/views/modules/mspbots/notification-setting/create-notice/create-notice.vue";
export default {
  name: "notification-setting",
  components: {
    contentHeader,
    createNotice,
  },
  data () {
    return {
      visible: false,
      loading: false,
      tableData: [],
      multipleSelection: [],
      editNoticeData: null,
      toolbar: ['Search'],
      pageOptions: {
        pageCount: 5,
        pageSize: 15,
        pageSizes: [10, 15, 50, 100, 200]
      },
      filterOptions: {
        type: 'Excel'
      },
      selectionOptions: { persistSelection: true, type: 'Multiple', checkboxOnly: true },
      sendTemplate: () => {
        return {
          template: Vue.component('Status', {
            template: `<div>{{data.executionType === 1 ? 'Send Immediately' : 'Timed transmission'}}</div>`,
          })
        }
      },
      statusTemplate: () => {
        return {
          template: Vue.component('Status', {
            template: `<div>{{data.status === 0 ? 'Not sent' : data.status === 1 ? 'has been sent' : ''  }}</div>`,
          })
        }
      },
      createdTemplate: () => {
        return {
          template: Vue.component('Created', {
            template: `<div v-if="data.createDate">{{ data.createDate | transformTimeZone}}</div>`,
          })
        }
      },
      updateTemplate: () => {
        return {
          template: Vue.component('Update', {
            template: `<div v-if="data.updateDate">{{ data.updateDate | transformTimeZone}}</div>`,
          })
        }
      },
      cTemplate: () => {
        const that = this
        return {
          template: Vue.component('Action', {
            template: `<div>
<!--                        <el-tooltip content="Edit"-->
<!--                            placement="top"-->
<!--                            :open-delay="1000">-->
<!--                          <div :style="style" @click="edit">-->
<!--                              <i class="el-icon-edit"></i>-->
<!--                          </div>-->
<!--                        </el-tooltip>-->
                        <el-tooltip content="Delete"
                            placement="top"
                            :open-delay="1000">
                          <div :style="style" @click="cancel">
                              <i class="cuifont icon_x"></i>
                          </div>
                        </el-tooltip>
                        <el-tooltip content="Hide Stop displaying notification for banner / popup / bell"
                            placement="top"
                            :open-delay="1000">
                          <div :style="style" @click="hide">
                              <i class="el-icon-document"></i>
                          </div>
                        </el-tooltip>
                      </div>`,
            data () {
              return {
                data: {},
                style: `width: 24px;height: 24px;background: #F2F4F8;border-radius: 2px 2px 2px 2px;margin-right: 8px;display: inline-block;line-height: 24px;text-align: center;cursor: pointer;`
              }
            },
            methods: {
              edit () {
                that.editNotice(this.data)
              },
              cancel () {
                that.deleteNotice([this.data.id])
              },
              hide () {
                that.hideNotice(this.data)
                // This notification can not be hidden, only banner/ popup / bell type messages can be hidden.
              }
            }
          })
        }
      },
    }
  },
  methods: {
    selectingEvent (e) {
      const gridObj = this.$refs.grid.ej2Instances
      this.multipleSelection = gridObj.getSelectedRecords() // get the selected records.
    },
    toolbarClick: function (args) {

    },
    close () {
      this.editNoticeData = null
    },
    success () {
      this.getNoticeList()
    },
    async getNoticeList () {
      this.loading = true
      const { noticeList } = this.$interface.notice
      const { data } = await noticeList()
      this.tableData = data.data
      this.loading = false
    },
    async deleteNotice (ids) {
      this.$confirm('This notification will be deleted, please confirm whether to continue', 'Delete', {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(async () => {
        this.loading = true
        const { deleteNotice } = this.$interface.notice
        const { data } = await deleteNotice(ids)
        if (data.code === 0) {
          this.$message.success('delete success')
          this.multipleSelection = []
          await this.getNoticeList()
        }
      }).catch(() => {
      })
    },
    editNotice (val) {
      this.editNoticeData = val
      this.visible = true
    },
    async hideNotice (item) {
      this.$confirm('This notification will be hidden, stop displaying in banner/ popup / bell. please confirm whether to continue', 'Hide', {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      }).then(async () => {
        const { updateNotice } = this.$interface.notice
        let params = {
          hide: true,
          userId: this.$store.state.user.id,
          version: item.version,
          executionType: item.executionType,
          id: item.id,
          notifyType: 'banner'
        }
        const { data } = await updateNotice(params)
        if (data.code === 0) {
          this.$message.success('hide success')
          await this.getNoticeList()
        }
      })
    }
  },
  created () {
    this.getNoticeList()
  }
}
</script>

<style scoped>

</style>